<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <style>
      input {
        width: 80%;
      }
    </style>
  </head>
  <body>
    <h1>http-request使用demo</h1>
    <p>
      <input
        id="params"
        type="text"
        placeholder='输入params参数：{ "id": 1 }' />
      <button onclick="getHttpRequest()">get请求</button>
    </p>
    <p>
      <input
        id="data"
        type="text"
        placeholder='输入data参数：{ "name": "demo" }' />
      <button onclick="potHttpRequest()">post请求</button>
    </p>
    <p>
      <input
        id="account"
        type="text"
        value='{ "name": "demo", "password": "123" }'
        placeholder='输入账号密码：{ "name": "demo", "password": "123" }' />
      <button onclick="loginHttpRequest()">登录</button>
    </p>
    <hr />
    <p>
      <button onclick="getUser()">获取用户信息</button>
    </p>

    <script src="../dist/http-request.global.js"></script>
    <script>
      /***************************************** 配置 ********************************************/
      const http = new HttpRequest.default();
      // 错误处理
      http.requestCatchHook = (err, options, next) => {
        const { response } = err;
        console.log("错误处理", err);
        console.log("options", options);

        // 提示错误
        if (options?.showError !== false) {
          // 登录接口401{ "name": "demo", "password": "123" }
          if (
            response?.config?.url == "/api/login" &&
            response?.data?.message
          ) {
            alert(response.data.message);
          } else {
            console.error(err);
          }
        } else {
          next();
        }
      };
      // 数据转换, 必须 return { code, result, message }
      http.transformResponseHook = (res) => {
        console.log("数据转换", res);
        const { data, status } = res;
        if (status == 200 && data.code == 0) {
          // 请求成功
          return data;
        } else if (status == 401 || data.code == 401) {
          // 401 处理
          return data;
        } else {
          // 错误提示
          throw new Error(data.message);
        }
      };
      // 刷新token
      http.refreshToken = (params) => {
        return http.get({ url: "/api/refreshToken", params });
      };
      // 401 处理
      http.logout_401 = (data) => {
        console.log("没有token，去登录");
      };
      /*************************************************************************************/

      function getHttpRequest() {
        let params = document.getElementById("params").value;
        if (params) params = JSON.parse(params);
        http.get({ url: "/api/demo", params }).then((res) => {
          console.log("get请求", res);
        });
      }

      function potHttpRequest() {
        let params = document.getElementById("params").value;
        if (params) params = JSON.parse(params);
        let data = document.getElementById("data").value;
        if (data) data = JSON.parse(data);
        http.post({ url: "/api/demo", params, data }).then((res) => {
          console.log("pot请求", res);
        });
      }

      function loginHttpRequest() {
        let data = document.getElementById("account").value;
        if (data) data = JSON.parse(data);
        http.post({ url: "/api/login", data }).then((res) => {
          console.log("登录信息", res);
          http.setToken(res.token);
          http.setReToken(res.reToken);
        });
      }

      function getUser() {
        http.get({ url: "/api/user" }).then((res) => {
          console.log("get请求", res);
        });
      }
    </script>
  </body>
</html>
